<template>
	<view>
		<u-navbar :border-bottom="false" title="企业图标" :title-size="36" :title-bold="true" :title-color="textColor">
		</u-navbar>
		<view class="u-avatar-wrap">
			<!-- <image class="u-avatar-demo" :src="avatar" mode="aspectFill"></image> -->
			<u-avatar :src="avatar" size="180"></u-avatar>
		</view>
		<view class="u-button-wrap">
			<u-button size="medium" shape="circle" hover-class="none" :ripple="true" :hair-line="false" :custom-style="buttonStyle" @tap="chooseAvatar">更换头像</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: '',
				shopId:'',
				buttonStyle: {
					width: '200rpx',
					height: '70rpx',
					color: this.themeColor,
					border: '1px solid',
					onNum:1
				}
			}
		},
		onLoad(options) {
			this.shopId = options.shopId;
			this.avatar = options.avatar;
		},
		created() {
			let that = this;
			uni.$off('uAvatarCropper')
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', async (path) => {
				uni.showLoading({
					title:"图片上传中"
				})
				this.avatar = path;
				// 可以在此上传到服务端
				const res = await this.$http.upload('api/Resource/UploadToOss', {
					filePath: path,
					name: 'file',
					header: {
						contentType: "multipart/form-data;charset=UTF-8"
					}
				});
				uni.hideLoading();
				let data = this.$u.test.jsonString(res) ? JSON.parse(res) : res;
				if (!data.data) {
					return this.$u.toast('请重新选择')
				}else{
					this.$u.toast('上传成功')
					this.changeShopLogo(data.data[0].id);
				}
				// this.changeShopLogo(data.data[0].id)
				// uni.uploadFile({
				// 	url: this.baseUrl + 'api/Resource/Upload',
				// 	filePath: path,
				// 	name: 'file',
				// 	complete: (res) => {
				// 		console.log(res);
				// 	}
				// });
			})
		},
		methods: {
			chooseAvatar() {
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			// 修改企业头像
			async changeShopLogo(resourceId) {
				uni.showLoading({
					title:"图片上传中"
				})
				const params = {
					id: this.shopId,
					resourceId
				}
				const res =  await this.$http.post('api/shop/updateLogo', params)
				await this.$store.dispatch('shop/updateInfo', { logoResourceId: resourceId })
				this.$u.toast('修改成功', 1000, 'success')
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.wrap {
		padding: 40rpx;
	}

	.u-avatar-wrap {
		margin-top: 100rpx;
		overflow: hidden;
		margin-bottom: 80rpx;
		text-align: center;
	}

	.u-button-wrap {
		text-align: center;
	}
</style>
